import React, { Component } from 'react';
import { ImageBackground, FlatList, View, Image, RefreshControl, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native';
import { unitWidth, width } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import Colors from '../constants/Colors';
import { show } from '../constants/Toast';
import RefreshFooter from '../components/RefreshFooter';
import EmptyView from '../components/EmptyView';

//可以直接当做只有一个标题的列表的界面的模版
export default class CommonListScreen extends Component {

    constructor(props) {
        super(props)
        this.state = {
            list: [],
            refreshing: false,
            showFoot: 0,//显示上拉加载更多
        }
        this.page = 1;
    }

    componentDidMount() {
        this.getData();
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <MyHeader leftImg={{ uri: 'ic_back_red' }} title='标题' leftClick={() => { this.props.navigation.pop() }} />
                <FlatList
                    style={{ alignSelf: 'stretch' }}
                    showsVerticalScrollIndicator={false}
                    data={this.state.list}
                    ListEmptyComponent={() => <EmptyView />}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh.bind(this)}
                            colors={[Colors.headerColor]}
                            progressBackgroundColor="#ffffff"
                        />
                    }
                    renderItem={this._getItem.bind(this)}
                    ListFooterComponent={<RefreshFooter showFoot={this.state.showFoot} />}
                    onEndReachedThreshold={0.1}
                    onEndReached={this.onLoadMore.bind(this)}
                />
            </View>
        );
    }

    _getItem({ item, index }) {
        return (
            <TouchableOpacity style={{
                width: width,
                height: 59 * unitWidth,
                paddingHorizontal: 15 * unitWidth,
                backgroundColor: Colors.white,
                marginTop: 5 * unitWidth,
                flexDirection: 'row',
                alignItems: 'center'
            }} onPress={() => { this.props.navigation.navigate('OtherInfo', { id: item.id }) }}>
                <Image style={{ width: 40 * unitWidth, height: 40 * unitWidth, borderRadius: 20 * unitWidth }} source={{ uri: item.avatar }} />
                <Text style={{ color: Colors.black, marginLeft: 15 * unitWidth }}>{item.name}</Text>
            </TouchableOpacity>
        )
    }

    //刷新
    _onRefresh() {
        this.setState({
            refreshing: true,
        });
        this.page = 1;
        this.getData();
    }

    //加载更多
    onLoadMore() {
        console.log('onLoadMore:' + this.state.showFoot);
        //如果是正在加载中或没有更多数据了，则返回
        if (this.state.showFoot != 0) {
            return;
        }
        //底部显示正在加载更多数据
        this.page++;
        this.setState({
            showFoot: 2,
        })
        this.getData();
        //获取数据
    }

    //获取
    getData() {
        // let params = {
        //     'pageNow': this.page,
        //     'pageSize': 10,
        // }
        // postFetch(api_Members_followList, params, {
        //     success: (response) => {
        //         if (this.page == 1) {
        //             this.setState({
        //                 refreshing: false,
        //                 list: response.result.data,
        //                 showFoot: 0
        //             })
        //         } else {
        //             if (response.result.data && response.result.data.length > 0) {
        //                 this.setState({
        //                     refreshing: false,
        //                     list: this.state.list.concat(response.result.data),
        //                     showFoot: 0
        //                 })
        //             } else {
        //                 this.setState({
        //                     refreshing: false,
        //                     showFoot: 1
        //                 })
        //             }
        //         }
        //     },
        //     fail: (response) => {
        //         this.setState({
        //             refreshing: false,
        //             showFoot: 0
        //         })
        //         show('获取失败');
        //     }
        // })
    }
}